<template>
  <div id="buySell">
    <div id="dealType" :gutter="20">
      <div>
        <el-button
          :class="[btnChoose==v.id?'btnTwo':'btnOne']"
          v-for="(v,i) in btnType"
          :key="i"
          size="mini"
        >{{v.name}}</el-button>
      </div>
      <div>
        <!-- <el-button class="btnNone" size="mini">全仓</el-button>
        <el-button class="btnColor" size="mini">100X</el-button>-->
      </div>
    </div>
    <div id="dealWrite">
      <div class="left">
        <div class="input">
          <p>一手合约价值{{onePrice}}USDT</p>
          <el-input size="small" placeholder="买入量" v-model="buy.Amount">
            <template slot="append">手</template>
          </el-input>
        </div>
        <div class="input-add">
          <div>
            <p>止盈比例(必填)</p>
            <!-- <el-input-number
              size="small"
              :precision="2"
              :step="0.1"
              :min="0.1"
              :max="0.6"
              v-model="buy.Limit"
              label="描述文字"
            ></el-input-number> -->
            <el-select size="small" v-model="buy.Limit" placeholder="请选择活动区域">
              <el-option v-for="(v,i) in proportion" :key="i" :label="v" :value="v"></el-option>
            </el-select>
          </div>
          <div>
            <p>止损比例(必填)</p>
            <!-- <el-input-number
              size="small"
              :precision="2"
              :step="0.1"
              :min="0.1"
              :max="0.6"
              v-model="buy.Stop"
              label="描述文字"
            ></el-input-number> -->
            <el-select size="small" v-model="buy.Stop" placeholder="请选择活动区域">
              <el-option v-for="(v,i) in proportion" :key="i" :label="v" :value="v"></el-option>
            </el-select>
          </div>
        </div>
        <!-- <el-slider v-model="value1"></el-slider> -->
        <div class="submit">
          <div>
            <p>手续费：{{handling1}}</p>
            <span>占用：{{buyHold}}USDT</span>
            <span>可用：{{JSON.parse(getMoney)==null?'--':JSON.parse(getMoney).Balance}}USDT</span>
          </div>
          <el-button
            :loading="buyLoading"
            v-show="user == null?false:true"
            @click="buyIt"
            class="buy"
            style="width:100%"
            size="small"
            type="primary"
          >买入</el-button>
          <el-button
            @click="$router.push({path:'/login'})"
            v-show="user != null?false:true"
            class="buy"
            style="width:100%"
            size="small"
            type="primary"
          >登录/注册</el-button>
        </div>
      </div>
      <div class="right">
        <div class="input">
          <p>一手合约价值{{onePrice}}USDT</p>
          <el-input size="small" placeholder="卖出量" v-model="sel.Amount">
            <template slot="append">手</template>
          </el-input>
        </div>
        <div class="input-add">
          <div>
            <p>止盈比例(必填)</p>
            <!-- <el-input-number
              size="small"
              :precision="2"
              :step="0.1"
              :min="0.1"
              :max="0.6"
              v-model="sel.Limit"
              label="描述文字"
            ></el-input-number>-->
            <el-select size="small" v-model="sel.Limit" placeholder="请选择活动区域">
              <el-option v-for="(v,i) in proportion" :key="i" :label="v" :value="v"></el-option>
            </el-select>
          </div>
          <div>
            <p>止损比例(必填)</p>
            <!-- <el-input-number
              size="small"
              :precision="2"
              :step="0.1"
              :min="0.1"
              :max="0.6"
              v-model="sel.Stop"
              label="描述文字"
            ></el-input-number> -->
            <el-select size="small" v-model="sel.Stop" placeholder="请选择活动区域">
              <el-option v-for="(v,i) in proportion" :key="i" :label="v" :value="v"></el-option>
            </el-select>
          </div>
        </div>
        <!-- <el-slider v-model="value1"></el-slider> -->
        <div class="submit">
          <div>
            <p>手续费：{{handling2}}</p>
            <span>占用：{{selHold}}USDT</span>
            <span>可用：{{JSON.parse(getMoney)==null?'--':JSON.parse(getMoney).Balance}}USDT</span>
          </div>
          <el-button
            v-show="user == null?false:true"
            @click="selIt"
            :loading="selLoading"
            class="sell"
            style="width:100%"
            size="small"
            type="danger"
          >卖出</el-button>
          <el-button
            @click="$router.push({path:'/login'})"
            v-show="user != null?false:true"
            class="sell"
            style="width:100%"
            size="small"
            type="danger"
          >登录/注册</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  infosKindsGetlist,
  tradesPositionOpen,
  accountGet
} from "../../api/api";
import { mapState } from "Vuex";
import qs from "qs";
export default {
  name: "buySell",
  data() {
    return {
      btnChoose: 1,
      btnType: [
        {
          id: 1,
          name: "市价委托"
        }
      ],
      proportion:["10%","20%","30%","40%","50%","60%","70%","80%"],
      onePrice: "--",
      buy: {
        BS: "buy",
        Amount: "",
        Price: "",
        Limit: "80%",
        Stop: "80%"
      },
      buyHold: 0,
      sel: {
        BS: "sel",
        Amount: "",
        Price: "",
        Limit: "80%",
        Stop: "80%"
      },
      selHold: 0,
      handling1: 0,
      handling2: 0,
      canUse: {},
      kindsId: "",
      buyLoading: false,
      selLoading: false
    };
  },
  computed: {
    ...mapState(["user", "product", "getMoney", "BTCUSDT",
      "ETHUSDT",
      "LTCUSDT",
      "IC500USDT",
      "HS300USDT"])
  },
  watch: {
    product() {
      if (JSON.parse(this.product).name == "BTC/USDT") {
        this.onePrice = 300;
      } else if (JSON.parse(this.product).name == "ETH/USDT") {
        this.onePrice = 100;
      } else if (JSON.parse(this.product).name == "LTC/USDT") {
        this.onePrice = 100;
      } else if (JSON.parse(this.product).name == "HS300/USDT") {
        this.onePrice = 1000;
      } else if (JSON.parse(this.product).name == "IC500/USDT") {
        this.onePrice = 1000;
      }
    },
    "buy.Amount"() {
      if (this.buy.Amount < 0) {
        this.buy.Amount = 0;
      } else {
        this.buyHold = this.onePrice * this.buy.Amount;
        this.handling1 = this.buyHold * 0.1;
      }
    },
    "sel.Amount"() {
      if (this.sel.Amount < 0) {
        this.sel.Amount = 0;
      } else {
        this.selHold = this.onePrice * this.sel.Amount;
        this.handling2 = this.selHold * 0.1;
      }
    }
  },
  created() {
    if (JSON.parse(this.product).name == "BTC/USDT") {
      this.onePrice = 300;
    } else if (JSON.parse(this.product).name == "ETH/USDT") {
      this.onePrice = 100;
    } else if (JSON.parse(this.product).name == "LTC/USDT") {
      this.onePrice = 100;
    } else if (JSON.parse(this.product).name == "HS300/USDT") {
      this.onePrice = 1000;
    } else if (JSON.parse(this.product).name == "IC500/USDT") {
      this.onePrice = 1000;
    }
    this.getUse();
  },
  methods: {
     toPoint(percent){
    var str=percent.replace("%","");
    str= str/100;
    return str;
},
    getKinds() {
      var params = {
        goodsId: JSON.parse(this.product).id,
        category: 1
      };
      infosKindsGetlist(params).then(res => {
        this.kindsId = res.data.KindsItem[0].id;
        console.log(this.kindsId, 6666);
      });
    },
    buyIt() {
      if (this.buy.Amount <= 0) {
        this.$message({
          message: "买入量不能小于等于0"
        });
        return false;
      }
      var params = {
        goodsId: JSON.parse(this.product).id,
        category: 1
      };
      if(JSON.parse(this.product).tradeCode == 'BTCUSDT'){
           var Price = this.BTCUSDT
      }else if(JSON.parse(this.product).tradeCode == 'ETHUSDT'){
           var Price = this.ETHUSDT
      }
      else if(JSON.parse(this.product).tradeCode == 'LTCUSDT'){
           var Price = this.LTCUSDT
      }
      else if(JSON.parse(this.product).tradeCode == 'IC500'){
           var Price = this.IC500USDT
      }
      else if(JSON.parse(this.product).tradeCode == 'HS300'){
           var Price = this.HS300USDT
      }
      this.buyLoading = true;
      infosKindsGetlist(params).then(res => {
        var kindsId = res.data.KindsItem[0].id;
        var params = {
          guid: this.$allId.guid,
          loginId: this.user.Customer.loginId,
          sessionId: this.user.SessionId,
          code: JSON.parse(this.product).tradeCode,
          kindsId: kindsId,
          bs: this.buy.BS,
          amount: Number(this.buy.Amount),
          limit:this.toPoint(this.buy.Limit),
          stop:this.toPoint(this.buy.Stop),
          type: 0,
          hq: Price
        };
        tradesPositionOpen(params).then(res => {
          this.buyLoading = false;
          if (res.data.ResultCD == "I001") {
            this.$message({
              message: "买入成功",
              type: "success"
            });
            this.$store.commit("tableList", JSON.stringify(new Date()));
            this.getUse();
          } else {
            this.$message.error(res.data.ErrorMsg);
          }
        });
      });
    },
    selIt() {
      if (this.sel.Amount <= 0) {
        this.$message({
          message: "卖出量不能小于等于0"
        });
        return false;
      }
      var params = {
        goodsId: JSON.parse(this.product).id,
        category: 1
      };
       if(JSON.parse(this.product).tradeCode == 'BTCUSDT'){
           var Price = this.BTCUSDT
      }else if(JSON.parse(this.product).tradeCode == 'ETHUSDT'){
           var Price = this.ETHUSDT
      }
      else if(JSON.parse(this.product).tradeCode == 'LTCUSDT'){
           var Price = this.LTCUSDT
      }
      else if(JSON.parse(this.product).tradeCode == 'IC500'){
           var Price = this.IC500USDT
      }
      else if(JSON.parse(this.product).tradeCode == 'HS300'){
           var Price = this.HS300USDT
      }
      this.selLoading = true;
      infosKindsGetlist(params).then(res => {
        var kindsId = res.data.KindsItem[0].id;
        var params = {
          guid: this.$allId.guid,
          loginId: this.user.Customer.loginId,
          sessionId: this.user.SessionId,
          code: JSON.parse(this.product).tradeCode,
          kindsId: kindsId,
          bs: this.sel.BS,
          amount: Number(this.sel.Amount),
          limit:this.toPoint(this.sel.Limit),
          stop:this.toPoint(this.sel.Stop),
          type: 0,
          hq: Price
        };
        tradesPositionOpen(params).then(res => {
          console.log(res.data, 444);
          this.selLoading = false;
          if (res.data.ResultCD == "I001") {
            this.$message({
              message: "卖出成功",
              type: "success"
            });
            this.$store.commit("tableList", JSON.stringify(new Date()));
            this.getUse();
          } else {
            this.$message.error(res.data.ErrorMsg);
          }
        });
      });
    },
    // //获取可用
    getUse() {
      var params = {
        guid: this.$allId.guid,
        loginId: this.user.Customer.loginId,
        sessionId: this.user.SessionId
      };
      accountGet(params).then(res => {
        this.canUse = res.data;
        this.$store.commit("getMoney", JSON.stringify(res.data));
      });
    }
  }
};
</script>
<style lang='less' scoped>
@color1: #162235;
@color2: #8b91b1;
@color3: #1b273b;
@line: #1e2b40;
@color4: #111d2d;
@color5: #1a273a;
@line2: #233047;
@color6: #3a58cb;
.buy {
  background-color: #35b8a7;
  border: #35b8a7;
}
.sell {
  background-color: #be4662;
  border: #be4662;
}
.btnOne {
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid @line2;
  color: @color2;
}
.btnTwo {
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid @color6;
  color: @color6;
}
.btnNone {
  background-color: rgba(0, 0, 0, 0);
  border: 0;
  color: @color2;
}
.btnColor {
  background-color: #1d2c44;
  border: 1px solid #203378;
  color: @color6;
}
#buySell {
  border: 1px solid @line;
  box-sizing: border-box;
  background-color: @color1;
  margin-top: 10px;
  #dealType {
    display: flex;
    justify-content: space-between;
    background-color: @color4;
    padding: 10px;
    box-sizing: border-box;
  }
  #dealWrite {
    display: flex;
    > div {
      width: 50%;
      padding: 0 20px;
      box-sizing: border-box;
    }
  }
}
.input {
  p {
    text-align: right;
    font-size: 10px;
    padding: 10px 0;
    box-sizing: border-box;
    color: @color2;
  }
}
.input-add {
  display: flex;
  justify-content: space-between;
  > div {
    width: 45%;
    p {
      font-size: 10px;
      padding: 10px 0;
      box-sizing: border-box;
      color: @color2;
    }
  }
}
.submit {
  > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    padding: 15px 0 10px;
    box-sizing: border-box;
    color: @color2;
  }
}
/deep/.el-input__inner {
  background-color: @color4;
  border: @color4;
}
/deep/.el-input-group__append,
.el-input-group__prepend {
  background-color: @color4;
  border: @color4;
  color: @color2;
}
/deep/.el-input-number__decrease {
  background-color: @color4;
  border-right: @color2;
}
/deep/.el-input-number__increase {
  background-color: @color4;
  border-left: @color2;
}
</style>